Lecture 13 – Notes

📒 Notes for Lecture 13: Entities, Code, Pre, Canvas & Quotations

Entities in HTML

HTML entities are special character codes used to display symbols that either have special meaning in HTML or are not directly printable on the keyboard. For example:

© renders as © (copyright symbol)
® renders as ® (registered trademark)
° renders as ° (degree symbol)

If you need to insert the actual “<” or “>” characters in the browser, you write:

< renders as <
> renders as >
& renders as &
  renders as a non-breaking space

In HTML, you can also use numeric (hex) references like © for © or ° for °—both work exactly the same as named entities.

How to Use Entities

Whenever you want to display a character that would otherwise be interpreted as HTML or is not easily typed, use its entity code. For example:

< < – shows the “less-than” sign
> > – shows the “greater-than” sign
& & – shows the ampersand
  (non-breaking space) – prevents line breaks at that point
© © – shows the copyright symbol

`<code>` Tag in HTML

The <code> tag is used for displaying inline code snippets. It typically renders text in a monospace font so that any HTML or programming code stands out clearly.

Example:

<code><html><body>Hello, World!</body></html></code>

Notice how the “<” and “>” characters are escaped as entities (<, >) inside the code block.

`<pre>` Tag in HTML

The <pre> tag preserves both spaces and line breaks exactly as they appear in your source code. It’s commonly used for:

Displaying blocks of code
Showing formatted text where whitespace matters

Example:


A preformatted text block
    preserves indentation
and line breaks exactly

Combining `<pre>` and `<code>`

When you want to display a multi-line code snippet with both syntax highlighting and preserved formatting, wrap the code inside both tags:

<pre>
  <code>
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    <body>
      <h1>Heading 1</h1>
      <h2>Heading 2</h2>
      <p>Paragraph</p>
    </body>
    </html>
  </code>
</pre>

HTML Boilerplate Example

Here’s a minimal HTML5 boilerplate structure:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <header></header>
  <main></main>
  <footer></footer>
  <h1></h1>
  <h2></h2>
  <h3></h3>
  <h4></h4>
  <h5></h5>
  <h6></h6>
  <p></p>
</body>
</html>

To explore more miscellaneous tags, check out these links:

`<canvas>` Element

The <canvas> element provides a drawable area on which you can create graphics—such as shapes, charts, and animations—using JavaScript. Common use cases:

Graphics: Drawing custom shapes and graphs.
Dynamic Content: Redrawing visuals in real time (e.g., games, data plots).
Interactivity: Although JavaScript is required for interactivity, <canvas> is the HTML foundation.

Example inclusion:

<canvas id="myCanvas" width="200" height="100"></canvas>

HTML Quotation Tags

Quotations in HTML can be marked up semantically using:

<blockquote> (block-level quotes, usually multi-line). Example:

<blockquote cite="https://example.com">
  This is a long quote from an external source.
</blockquote>

<q> (inline quotes, shorter phrases). Example:

The philosopher said, <q cite="https://example.com">The unexamined life is not worth living.</q>

Both tags support a cite attribute to specify the source URL. Styling these tags with CSS can improve readability and accessibility.

Hinglish: Lecture 13 mein humne HTML ke special tags aur entities ke baare mein padha. Entities jaise <, >, &, © ka use kiya jata hai special characters dikhane ke liye jo normally HTML mein kaam karte hain. Fir humne <code> tag dekha jo inline code ko monospace font mein show karta hai, aur <pre> tag jo formatting ko preserve karta hai jaise line breaks aur spaces.

Humne dono ko combine karke multi-line formatted code display kiya using <pre><code>...</code></pre>. Fir <canvas> tag dekha jo ek drawable area provide karta hai JavaScript ke through graphics banane ke liye – jaise games, graphs ya dynamic visuals.

Aakhir mein, quotation tags <blockquote> aur <q> use kiye jate hain long aur short quotes ke liye respectively, jisme cite attribute bhi hota hai jahan se quote liya gaya hai.

💻 Live Code Preview

If the iframe doesn’t load, click
here to open Lecture 13 Demo in a new tab.

← Back to Lecture Dashboard